<template>
  <div class="back-top" @click="backTop" :class="{ isactive: showBtn }">
    <!-- 外层包裹a标签 href='#' 即可在点击后刷新页面返回顶部 -->
    <!-- <a href="#"> -->
    <img src="http://192.168.2.27:8888/assets/img/top-filling.png" alt="" />
    <!-- </a> -->
  </div>
</template>

<script>
export default {
  name: "BackTop",
  data() {
    return {
      showBtn: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.showbtn, true);
  },
  beforeUnmount() {
      window.removeEventListener("scroll",this.showbtn)
  },  
  methods: {
    // 回到顶部
    showbtn() {
      let that = this;
      //获取滚动距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      //当滚动距离大于900 出现返回箭头
      if (scrollTop > 700) {
        this.showBtn = true;
      } else {
        this.showBtn = false;
      }
    },
    backTop() {
      var timer = setInterval(function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 15);
    },
  },
};
</script>

<style scoped>
.back-top {
  position: fixed;
  right: 10px;
  bottom: 55px;
  background-color: rgba(0, 150, 136, 0.78);
  border-radius: 50%;
  height: 50px;
  width: 50px;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transition: 0.3s linear;
  z-index: 10001;
}
.back-top img {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  margin-top: 10%;
  vertical-align: top;
  /* background-color: red; */
}
.isactive {
  opacity: 1;
  transform: scale(1);
}
</style>